<template>
  <div>
    <!--输入需求-->
<!--    <el-card>-->
<!--        <el-form :inline="true" :model="formInline" class="demo-form-inline">-->
<!--          <el-form-item label="需求：" class="el-col-8">-->
<!--            <el-input v-model="formInline.demand" placeholder="请输入需求"></el-input>-->
<!--          </el-form-item>-->
<!--&lt;!&ndash;          <el-form-item label="数据：" class="el-col-5">&ndash;&gt;-->
<!--&lt;!&ndash;            <el-input v-model="formInline.oldData" placeholder="请输入原始数据"></el-input>&ndash;&gt;-->
<!--&lt;!&ndash;          </el-form-item>&ndash;&gt;-->
<!--          <el-form-item label="上传文件：" class="el-col-8">-->
<!--            <el-upload-->
<!--                      class="upload"-->
<!--                       ref="upload"-->
<!--                       action="string"-->
<!--                       :file-list="fileList"-->
<!--                       :on-change="handleChange"-->
<!--                       :auto-upload="false"-->
<!--                      :limit="1"-->
<!--                       multiple="multiple">-->
<!--            <el-button-->
<!--                      slot="trigger"-->
<!--                       size="small"-->
<!--                       type="primary"-->
<!--                       @click="delFile">选取文件</el-button>-->
<!--            </el-upload>-->

<!--          </el-form-item>-->
<!--          <el-form-item class="el-col-3">-->
<!--            <el-button type="primary" @click="getBiData">提交</el-button>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--  </el-card>-->
    <!--显示图表-->
    <el-row>
      <el-col :span="8" v-for="item in biAllData" :key="item.id" >
        <el-card :body-style="{ padding: '0px' }">
          <spn v-if=isEmpty(item.genChart)>正在加载中</spn>
          <Echarts v-else :option="JSON.parse(item.genChart)" style="height: 400px;width: 630px" />
          <div style="padding: 14px;">
            <span>{{item.goal}}</span>
            <div class="bottom clearfix">
              <time class="time">{{item.genResult}}</time>
              <el-button type="text" class="button">操作按钮</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import biApi from '@/api/bi'
import Echarts from '@/components/Echarts/Echarts.vue'
import axios from 'axios'
export default {
  components: { Echarts },
  data() {
    return {
      formLabelWidth: '100px',
      formInline: {
        demand: '',
        formData: ''
      },
      biAllData: [],
      option: {
        'xAxis': {
          'type': 'category',
          'data': ['1号', '2号', '3号', '4号', '5号', '6号', '7号']
        },
        'yAxis': {
          'type': 'value'
        },
        'series': [
          {
            'data': [10, 20, 30, 90, 0, 10, 20],
            'type': 'line'
          }
        ]
      },
      analysis: '',
      fileList: [],
      multiple: false,
      currentDate: new Date()
    }
  },
  methods: {
    isEmpty(str) {
      return str.trim().length === 0
    },
    clearForm() {
      this.form = {}
      this.$refs.activityFormRef.clearValidate()
      this.formUser = {}
    },
    getBiData() {
      const formData = new FormData()
      formData.append('file', this.fileList[0].raw)
      formData.append('demand', this.formInline.demand)
      if (this.fileList.length === 0) {
        this.$message({
          type: 'warning',
          message: '请提交文件'
        })
        console.log('未上传文件')
        return
      }
      axios.post('http://101.201.64.236:9999/prod-api/bi/message', formData, {
        headers: {
          'Content-Type': 'multipart/form-data;charset=utf-8'
        }
      }).then(res => {
        // console.log(res)
        //  this.option = res.data.data.option
        const aaa = res.data.data.option
        // eslint-disable-next-line no-new-object
        this.option = JSON.parse(aaa)
        this.analysis = res.data.data.analysis
        console.log(this.analysis)
        console.log(this.option)
        if (res.data.code === 20000) {
          // 成功提示
          this.$message({
            message: '提交成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '请再次提交',
            type: 'warning'
          })
        }
      })
      // biApi.getAiResponse(this.formInline).then(resp => {
      //   this.option = resp.data.option
      //   this.analysis = resp.data.analysis
      // })
      // console.log('submit!')
    },
    // 点击上传文件触发的额外事件,清空fileList
    delFile() {
      this.fileList = []
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    // 点击文件
    handlePreview(file) {
      console.log(file)
    },
    // 查询全部的结果
    getBiAllData() {
      biApi.getAiAllResponse().then(resp => {
        this.biAllData = resp.data.data
      })
    }
  },
  created() {
    this.getBiAllData()
  }
}
</script>

<style>
.el-input {
  width: 250px;
  margin-right: 10px;
}

.el-dialog .el-input {
  width: 85%;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>
